<link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>



<!-- 文档地址 https://zijieke.com/semantic-ui/elements/button.php -->
<div>
	<button class="ui red basic button">红色</button>
	<button class="ui orange basic button">橙色</button>
	<button class="ui yellow basic button">黄色</button>
	<button class="ui olive basic button">橄榄绿</button>
	<button class="ui green basic button">纯绿</button>
	<button class="ui teal basic button">水鸭蓝</button>
	<button class="ui blue basic button">纯蓝</button>
	<br>
	<button class="ui violet basic button">紫罗兰</button>
	<button class="ui purple basic button">纯紫</button>
	<button class="ui pink basic button">粉红</button>
	<button class="ui brown basic button">棕色</button>
	<button class="ui grey basic button">灰色</button>
	<button class="ui black basic button">黑色</button>
	<button class="ui button">关注</button>
	<br>
	<button class="ui inverted button">标准</button>
	<button class="ui inverted red button">红色</button>
	<button class="ui inverted orange button">橙色</button>
	<button class="ui inverted yellow button">黄色</button>
	<button class="ui inverted olive button">橄榄绿</button>
	<button class="ui inverted green button">纯绿</button>
	<button class="ui inverted teal button">水鸭蓝</button>
	<br>
	<button class="ui inverted blue button">纯蓝</button>
	<button class="ui inverted violet button">紫罗兰</button>
	<button class="ui inverted purple button">纯紫</button>
	<button class="ui inverted pink button">粉红</button>
	<button class="ui inverted brown button">棕色</button>
	<button class="ui inverted grey button">灰色</button>
	<button class="ui inverted black button">黑色</button>
</div>

<script type="text/javascript">
	//按钮点击事件监听
	$('button.ui.button').click(function(){
		console.log($(this).index());
	});
</script>